/**
 * Created by YJH on 2018/6/4.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    View,
    Text,
    Image,
    TouchableOpacity,
    Linking,
} from 'react-native';
import {MORE_MENU} from './MoreMenu';
import AboutCommon, {FLAG_ABOUT_COMMON} from './AboutCommon';
import AboutMePage from './AboutMePage';
import WebBlogPage from './WebBlogPage';
import GlobalStyles from '../../../res/styles/GlobalStyles';
import NavigationBarUtil from '../../util/NavigationBarUtil';
import config from '../../../res/data/config.json';

export default class AboutPage extends Component<Props> {
    constructor(props) {
        super(props);
        this.aboutCommon = new AboutCommon(props,
            (dic) => this.updateDic(dic),
            FLAG_ABOUT_COMMON.flag_about, config);
        this.state = {
            projectModules:[],
            theme:this.props.theme,
        };
    }

    componentDidMount(){
        this.aboutCommon.componentDidMount();
    }


    updateDic(dic) {
        this.setState(dic);
    }

    onItemClick(tab) {
        let TabComponent, params = {...this.params, menuType: tab};
        switch (tab) {
            case MORE_MENU.about_for_website:
                TabComponent=WebBlogPage;
                menuType=tab;
                break;

            case MORE_MENU.about_for_author:
                TabComponent=AboutMePage;
                break;

            case MORE_MENU.about_for_feedback:
                //进入邮箱的进行反馈方法
                let url='mailto://yuannunhua@gmail.com';
                Linking.canOpenURL(url).then(supported => {
                    if (!supported) {
                        console.log('Can\'t handle url: ' + url);
                    } else {
                        return Linking.openURL(url);
                    }
                }).catch(err => console.error('An error occurred', err));



                break;

        }


        if (TabComponent) {
            this.props.navigator.push({
                component: TabComponent,
                params: params,
            })
        }

    }



    render() {

        let parallConfig = {
            renderForeground: 'https://img.mukewang.com/545866b700013ce302200220-140-140.jpg',
            renderBackground: 'https://ss2.baidu.com/-vo3dSag_xI4khGko9WTAnF6hhy/image/h%3D300/sign=3777a2b161224f4a4899751339f69044/b3b7d0a20cf431ad4e6397ae4736acaf2fdd98f0.jpg',
            userName: '中泰民安',
            userProfile: '受到全球关注的中美经贸磋商上周末进行了又一回合,宣布将对中国500亿美元高科技商品加征关税。',
        };

        let itemContentView = <View>

            {this.aboutCommon.renderRepository(this.state.projectModules)}

            {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_view_quilt.png'),
                MORE_MENU.about_for_website, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.about_for_website))}
            <View style={GlobalStyles.line}/>
            {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_insert_emoticon.png'),
                MORE_MENU.about_for_author, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.about_for_author))}
            <View style={GlobalStyles.line}/>
            {/*通过点击打开邮箱的客户端*/}
            {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_feedback.png'),
                MORE_MENU.about_for_feedback, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.about_for_feedback))}
            <View style={GlobalStyles.line}/>
        </View>;


        return this.aboutCommon.render(parallConfig,itemContentView);
    }
}

const styles=StyleSheet.create({
    item_cell: {
        padding: 10,
        backgroundColor: '#ffffff',
        borderWidth: 3,
        borderColor: '#F0F0F0',
        borderRadius: 5,
        elevation: 2,

    },
    item_avatar: {
        flexDirection: 'row',
        alignItems: 'center',
    },
    item_star: {
        flexDirection: 'row',
        justifyContent: 'flex-end',
        alignItems: 'center',
    },
    item_star_num: {
        color: 'gray',
        marginLeft: 10,
        marginRight: 10,
        fontSize: 14,
    },
    item_owner: {
        color: 'black',
        marginLeft: 10,
        marginRight: 10,
        fontSize: 16,
    },
    item_des: {
        color: 'gray',
        marginLeft: 50,
        fontSize: 14,
        flexWrap: 'nowrap',
    },
});
